
<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(span="8")
          span.label-txt.w80 客户名称：
          Input(v-model="formData.customerName" placeholder="请输入" clearable)
        //- Col.pr-20.mb-15(span="8")
        //-   span.label-txt.w80 客户所属：
        //-   Input(v-model="contact" placeholder="请输入" clearable)
        Col.pr-20.mb-15(span="8")
          Button(type="info" @click="searchFn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" stripe :columns="setThead" :data="tableData" :loading="loading"  @on-selection-change="handleOnSelectChange")
        div(slot="header")
          .pull-left.table-title-btns
            span.leftText
              | 完成项目数:
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
          .pull-right.table-title-btns
            Button(type="info" @click="handleExport") 导出
        template(slot-scope="{ row, index }" slot="customerName")
          .u-d-info(@click="gotoDetail(row.customerID)") {{row.customerName}}
        template(slot-scope="{ row, index }" slot="action")
          Button(type="text" size="small" @click="handleShowAddFeedbackModal(row)") 添加课程反馈
          Button.ml-10(type="text" size="small" @click="handleAddReport(row.productDeliveryID)") 课后报告
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

    //- 添加反馈
    AddFeedbackModal(ref="AddFeedbackModal" @query="searchFn")
    AddReportModal(ref="addReport" :id="productDeliveryID" :reportArr="reportArr" @get-report-list="getReportList")
</template>

<script>
import Mixin from '../deliverMixin.js'
import _cloneDeep from 'clone-deep'
import AddFeedbackModal from './modal/addFeedbackModal.vue'
import AddReportModal from './modal/addReport.vue'
import { ProductDeliveryApi } from '@/api/ProductDelivery.api.js'
import { incompleteThead } from '../tableHead.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: 'hrdc-finish',
  data () {
    return {
      loading: false,
      formData: {
        customerName: ''
      },
      productDeliveryID: '',
      reportArr: [], // 课后报告数组
      selectedEmployeeId: [], // 勾选的id集合,array格式
      selectedEmployeeArr: [], // 勾选的id, name数组集合
      thead: _cloneDeep(incompleteThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        inServiceCount: 0, // 在职
        outServiceCount: 0 // 离职
      }
    }
  },

  mixins: [Mixin],

  components: {
    AddFeedbackModal,
    AddReportModal
  },

  computed: {
    setThead () {
      return this.thead.splice(0, 17)
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'hrdc-finish') {
        this.query()
      }
    }
  },

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedEmployeeArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      this.selectedEmployeeId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedEmployeeArr)
      console.log('列表勾选数组2', this.selectedEmployeeId)
      localStorage.setItem('selectedEmployeeId', JSON.stringify(this.selectedEmployeeId))
    },

    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      this.loading = true
      var params = {
        CustomerName: this.formData.customerName,
        Saler: this.formData.saler,
        ServerName: this.formData.serverName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        OrderBy: '',
        Asc: true
      }

      let res = await ProductDeliveryApi.getListDelivery(params)
      this.loading = false
      if (res.data.code === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows // 总条数
      } else {
        this.tableData = []
      }
    },

    // 显示弹窗-添加反馈
    handleShowAddFeedbackModal (row) {
      console.log('row: ', row)
      this.$refs.AddFeedbackModal.show()
      this.$refs.AddFeedbackModal.productDeliveryID = row.productDeliveryID
    },

    // 添加课后报告弹窗
    handleAddReport (id) {
      console.log(id)
      this.$refs.addReport.show()
      this.productDeliveryID = id
      this.getReportList()
    },
    // 获取课后报告文件列表
    getReportList () {
      ProductDeliveryApi.addReport({
        AssociationId: this.productDeliveryID,
        CategoryName: '课后反馈'
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.reportArr = res.data.data
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 导出
    async handleExport () {
      var params = {
        CustomerName: this.formData.customerName,
        Saler: this.formData.saler,
        ServerName: this.formData.serverName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        OrderBy: '',
        Asc: true
      }

      let res = await ProductDeliveryApi.export(params)
      console.log('导出res: ', res)
      if (res.status === 200 && res.data.success) {
        console.log('❤ 返回链接: ', baseUrl + res.data.message)
        window.open(baseUrl + res.data.message, '_blank')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style>

</style>
